<template>
  <div id="fu">
      <div id="ios">
       <img src="../../assets/logo.png" style="width: 300px;" />
       <span style="font-size: 50px;">Erp阶段项目</span>
      </div>
    <div id="son">
      <el-row>
        <el-col style="margin-bottom: 6px;margin-top: 10px;  text-align: center;">
          <h4>登录</h4>
        </el-col>
      </el-row>
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="账号" prop="uid">
          <el-input type="text" v-model="ruleForm.uid" size="mini" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pwd" style="margin-top: 6px;">
          <el-input type="password" v-model="ruleForm.pwd" size="mini" autocomplete="off"></el-input>
        </el-form-item>



      <div style="text-align: right; margin-right: 70px;margin-top: 6px;">
        <el-button type="primary" @click="submitForm('ruleForm')" size="mini" round>提交</el-button>
        <el-button @click="resetForm('ruleForm')" type="info" size="mini" round>重置</el-button>
      </div>

      </el-form>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      var validateUid = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入账号'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePwd = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          callback();
        }
      };
      return {
        ruleForm: {
          uid: '',
          pwd: ''
        },
        rules: {
          uid: [{
            validator: validateUid,
            trigger: 'blur'
          }],
          pwd: [{
            validator: validatePwd,
            trigger: 'blur'
          }]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            var data = {
              uname: this.ruleForm.uid,
              upwd: this.ruleForm.pwd
            }
            this.$http.post("system/user/login", this.$qs.stringify(data)).then(res => {
              console.log(res);
              if (res.status == 200) {
                if (res.data) {
                  if (res.data.statics == "开启") {
                    //保存登录用户对象
                    // this.$store.commit('saveUsers', res.data);
                    // this.$store.commit('changeLogin', res.data);

                      this.$router.push('/main');

                    // if (this.$store.state.token != null) {
                    //   this.$router.push('/main');
                    // } else {
                    //   this.$message.error('系统异常!');
                    // }
                  } else {
                    this.$message.error('此账号已禁用!');
                  }
                } else {
                  this.$message.error('账号密码错误');
                }
              }
            }).catch(err => {
              console.log(err)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>
<style>
  #fu {

    background-color: whitesmoke;
    height: 480px;
    margin-top: 70px;

  }
.el-form-item {
    margin-bottom: 0px;
}
  #son {
    width: 350px;
    height: 167px;

    margin-left: 765px;
    position: absolute;

    top: 226px;
    border-radius: 8px;
    background-color: white;
  }
  #ios{

   width: 600px;
   height: 300px;
   position: absolute;
   top: 160px;
   left: 80px;
  }
  .el-input {
    width: 180px;
  }
 #ios  img,span{
   vertical-align: middle;
 }

  h2 {
    text-align: center;
  }
</style>
